<div class="login-page">


  <div *ngFor="let alert of alerts">
    <ngb-alert [type]="alert.type" [dismissible]="true" (close)="onClosed(alert)">{{ alert.msg }}</ngb-alert>
  </div>
  <h1 class="text-white system-name">地面站综合处理装置测试台</h1>

  <div class="login-form">
    <div nz-form [formGroup]="loginForm">
      <nz-space nzDirection="vertical" class="form-content">
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入用户名!">
            <nz-input-group nzPrefixIcon="user" nzSize="large">
              <input type="text" nz-input formControlName="USERNAME" placeholder="用户名"/>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入密码!">
            <nz-input-group nzPrefixIcon="lock" nzSize="large">
              <input type="password" nz-input formControlName="PASSWORD" placeholder="密码" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <div nz-row class="mt-5">
          <div nz-col nzSpan="12"><button nz-button nzType="primary" nzSize="large" class="login-btn float-left" [disabled]="loginForm.invalid"  (click)="login()">登 录</button></div>
          <div nz-col nzSpan="12"><button nz-button nzType="primary" nzSize="large" class="login-btn float-right" [disabled]="loginForm.invalid" (click)="cancel()">取 消</button></div>
        </div>
      </nz-space>



    </div>

  </div>
</div>
